<template>
  <div class="pc" v-if="store.state.isPc">
    <div class="about">
      <div class="navtext">
        <div class="tab">
          <el-dropdown>
            <el-button type="primary">
              {{ type.value.class_name }}库<el-icon class="el-icon--right"
                ><ArrowDown
              /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="item in typelist.value"
                  :key="item.id"
                  @click="cutype(item)"
                >
                  {{ item.class_name }}库</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <el-dropdown>
            <el-button type="primary">
              {{ country
              }}<el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="cutcountry('国内')"
                  >国内</el-dropdown-item
                >
                <el-dropdown-item @click="cutcountry('国外')"
                  >国外</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <!-- <div
            class="btn"
            :class="{ active: type == item.id }"
            @click="cutype(item.id)"
            v-for="item in typelist.value"
            :key="item.id"
          >
            {{ item.class_name }}库
          </div> -->
        </div>
        <div class="search">
          <el-input v-model="search" placeholder="搜索" />
          <el-button type="primary" color="#0c1770" @click="searchFun"
            >搜索</el-button
          >
        </div>
      </div>
      <div class="container">
        <ul class="list">
          <li
            v-for="item1 in schoollist.value"
            :key="item1.id"
            @click="godetails(item1)"
          >
            <div class="title">
              {{ item1.school_name }}
            </div>
            <div class="tag">
              <span
                @click.stop="godetails(item1, item2)"
                v-for="(item2, index2) in item1.label"
                :key="item2.id"
                >{{ item2.name }}</span
              >
            </div>
          </li>
        </ul>
        <div class="page">
          <el-pagination
            :current-page="page"
            :page-size="pagesize"
            layout="prev, pager, next"
            background
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div class="foot">
        <div class="top">
          <p>
            指导单位：全国文化艺术职业教育教学指导委员会&nbsp;&nbsp;&nbsp;中国艺术职业教育学会
          </p>
          <p>
            主办单位：全国文化艺术职业教育教学指导委员会对外交流与合作专委会&nbsp;&nbsp;&nbsp;教学质量评价与保障专委会
          </p>
          <p>承办单位：深圳艺术学校&nbsp;&nbsp;&nbsp;浙江艺术职业学院</p>
          <p>技术支持单位：广州市晨旭教育评估有限公司</p>
        </div>
        <div class="bottom">
          <p>ICP备15112809号-2</p>
        </div>
      </div>
    </div>
  </div>
  <div class="mob" v-else>
    <div class="about">
      <div class="navtext">
        <div class="tab">
          <!-- <div
            class="btn"
            :class="{ active: type == item.id }"
            @click="cutype(item.id)"
            v-for="item in typelist.value"
            :key="item.id"
          >
            {{ item.class_name }}库
          </div> -->

          <el-dropdown>
            <el-button type="primary">
              {{ type.value.class_name }}库<el-icon class="el-icon--right"
                ><ArrowDown
              /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="item in typelist.value"
                  :key="item.id"
                  @click="cutype(item)"
                >
                  {{ item.class_name }}库</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <el-dropdown>
            <el-button type="primary">
              {{ country
              }}<el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="cutcountry('国内')"
                  >国内</el-dropdown-item
                >
                <el-dropdown-item @click="cutcountry('国外')"
                  >国外</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="container">
        <ul class="list">
          <li
            v-for="item1 in schoollist.value"
            :key="item1.id"
            @click="godetails(item1)"
          >
            <div class="title">
              {{ item1.school_name }}
            </div>
            <div class="tag">
              <span
                @click="godetails(item1, item2)"
                v-for="(item2, index2) in item1.label"
                :key="item2.id"
                >{{ item2.name }}</span
              >
            </div>
          </li>
        </ul>
        <div class="page">
          <el-pagination
            :current-page="page"
            :page-size="pagesize"
            layout="prev, pager, next"
            background
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div class="foot">
        <p>
          指导单位：全国文化艺术职业教育教学指导委员会&nbsp;&nbsp;&nbsp;中国艺术职业教育学会
        </p>
        <p>
          主办单位：全国文化艺术职业教育教学指导委员会对外交流与合作专委会&nbsp;&nbsp;&nbsp;教学质量评价与保障专委会
        </p>
        <p>承办单位：深圳艺术学校&nbsp;&nbsp;&nbsp;浙江艺术职业学院</p>
        <p>技术支持单位：广州市晨旭教育评估有限公司</p>
        <p>ICP备15112809号-2</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Search, View, ArrowDown } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { debounce, throttle } from "lodash";
import { timestampToTime } from "../../utils/utils";
import { defineComponent, reactive, watch, ref, onMounted } from "vue";
import { schoolLists, labelClassLists } from "../../api/api";
import { useStore } from "vuex";
let $route = useRoute();
let $router = useRouter();
let search = ref($route.query.search ? $route.query.search : "");
let total = ref(0);
let page = ref(1);
let pagesize = ref(10);
let store = useStore();
onMounted(() => {});

let type: any = reactive({ value: {} });
let typelist: any = reactive({ value: [] });
const gettype = () => {
  labelClassLists({}).then((res) => {
    typelist.value = res.data;
    type.value = res.data[0];
    getschoollist();
  });
};
gettype();
const cutype = (value: number) => {
  console.log(value);
  type.value = value;
  page.value = 1;
  getschoollist();
};

let country = ref("国内");
const cutcountry = (value: any) => {
  country.value = value;
  page.value = 1;
  getschoollist();
};

let schoollist: any = reactive({ value: [] });
const getschoollist = () => {
  schoolLists({
    label_class_id: type.value.id,
    limit: pagesize.value,
    page: page.value,
    school_name: search.value,
    country: country.value,
  }).then((res: any) => {
    schoollist.value = res.data;
    total.value = res.paging.sum;
  });
};
//---------------------------------------------------------------------------获取搜索

const searchFun = debounce(function () {
  page.value = 1;
  getschoollist();
}, 500);

const godetails = (value: any, value2?: any) => {
  console.log(value, value2);
  window.open(
    `/schooldetails?schoolid=${value.id}&name=${$route.query.name}&id=${value2?.label_id}&type=${type.value.id}`
  );
};

//---------------------------------------------------------------------------end获取搜索

const handleSizeChange = () => {};

const handleCurrentChange = (value: number) => {
  page.value = value;
  getschoollist();
};
</script>

<style lang="scss" scoped>
.pc {
  .about {
    background: #f7f9ff;
    .navtext {
      width: 1400px;
      height: 100px;
      background: white;
      margin: 0 auto 20px auto;
      border-bottom: 1px solid #494dd4;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .tab {
        padding-left: 30px;
        width: calc(340px);
        height: 46px;
        display: flex;
        justify-content: space-between;
        .el-button {
          width: 138px;
          height: 46px;
          border-radius: 4px 4px 4px 4px;
          opacity: 1;
          border: 1px solid #0c1770;
          font-size: 18px;
          font-family: Source Han Sans-Regular, Source Han Sans;
          font-weight: 400;
          color: white;
          line-height: 46px;
          text-align: center;
          cursor: pointer;
          background: #0c1770;
        }
        .active {
          color: white;
          background: #0c1770;
        }
      }
      .search {
        padding-left: 40px;
        width: 680px;
        height: 50px;
        :deep(.el-input) {
          width: 500px;
          height: 100%;
          background-color: #f4f4f4 !important;
        }
        .el-button {
          width: 100px;
          height: 100%;
          color: white;
          margin-left: 10px;
        }
      }
    }
    .container {
      margin: 0 auto;
      margin-top: 0;
      border-radius: 5px;
      width: 1400px;
      position: relative;
      min-height: 800px;
      .list {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
          margin-bottom: 20px;
          background: white;
          height: 145px;
          padding: 23px 26px;
          position: relative;
          width: 683px;
          .title {
            margin-top: 10px;
            width: 650px;
            font-size: 20px;
            font-family: Source Han Sans-Medium, Source Han Sans;
            font-weight: 600;
            color: #333333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            cursor: pointer;
            &:hover {
              color: #33329a;
            }
          }
          .tag {
            margin-top: 30px;
            span {
              height: 28px;
              box-sizing: border-box;
              background: rgba(74, 77, 180, 0.05);
              padding: 5px 10px;
              display: inline-block;
              font-size: 14px;
              font-family: Source Han Sans-Regular, Source Han Sans;
              font-weight: 400;
              color: #333333;
              margin-right: 20px;
              border-radius: 14px;
              &:hover {
                color: #33329a;
                cursor: pointer;
              }
            }
          }
        }
      }
      .page {
        height: 100px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        :deep(.el-pagination) {
          .is-active {
            background: linear-gradient(269deg, #7b39c4 9%, #3226ba 100%);
            border-radius: 50%;
          }
          .btn-next,
          .btn-prev,
          .el-pager li {
            background-color: #0d0a6500 !important;
          }
        }
      }
    }
  }

  .foot {
    width: 100%;
    height: 270px;
    background: url("../../assets/footbg.png") no-repeat;
    background-size: 100% 100%;
    .top {
      height: 220px;
      width: 1400px;
      margin: 0 auto;
      box-sizing: border-box;
      padding-top: 40px;
      p {
        font-size: 18px;
        font-family: Source Han Sans-Regular, Source Han Sans;
        font-weight: 400;
        color: #ffffff;
        line-height: 36px;
      }
    }
    .bottom {
      height: 48px;
      border-top: 1px solid #dadada;
      p {
        line-height: 48px;
        text-align: center;
        font-size: 18px;
        font-family: Source Han Sans-Regular, Source Han Sans;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}
.mob {
  .about {
    background: #f7f9ff;
    .navtext {
      width: 46.875rem;
      height: 6.25rem;
      background: white;
      margin: 0 auto 1.25rem auto;
      border-bottom: 1px solid #494dd4;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tab {
        padding-left: 1.875rem;
        width: 22.5rem;
        height: 2.875rem;
        display: flex;
        justify-content: space-between;
        .btn {
          width: 8.625rem;
          height: 2.875rem;
          border-radius: 0.25rem;
          opacity: 1;
          border: 1px solid #0c1770;
          font-size: 1.125rem;
          font-family: Source Han Sans-Regular, Source Han Sans;
          font-weight: 400;
          color: #0c1770;
          line-height: 2.875rem;
          text-align: center;
          cursor: pointer;
        }
        .active {
          color: white;
          background: #0c1770;
        }
      }
    }
    .container {
      margin: 0 auto;
      margin-top: 0;
      border-radius: 0.3125rem;
      width: 46.875rem;
      position: relative;
      .list {
        margin-top: 1.25rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 15px;
        li {
          margin-bottom: 1.25rem;
          background: white;
          height: 12.5rem;
          padding: 1.4375rem 1.625rem;
          position: relative;
          width: 42.6875rem;
          .title {
            margin-top: 0.625rem;
            width: 40.625rem;
            font-size: 1.875rem;
            font-family: Source Han Sans-Medium, Source Han Sans;
            font-weight: 600;
            color: #333333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            cursor: pointer;
            &:hover {
              color: #33329a;
            }
          }
          .tag {
            margin-top: 2.5rem;
            span {
              height: 3.75rem;
              box-sizing: border-box;
              background: rgba(74, 77, 180, 0.05);
              padding: 0.9375rem 0.9375rem;
              display: inline-block;
              font-size: 1.25rem;
              font-family: Source Han Sans-Regular, Source Han Sans;
              font-weight: 400;
              color: #333333;
              margin-right: 1.25rem;
              border-radius: 1.875rem;
              &:hover {
                color: #33329a;
                cursor: pointer;
              }
            }
          }
        }
      }
      .page {
        height: 100px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        :deep(.el-pagination) {
          .is-active {
            background: linear-gradient(269deg, #7b39c4 9%, #3226ba 100%);
            border-radius: 50%;
          }
          .btn-next,
          .btn-prev,
          .el-pager li {
            background-color: #0d0a6500 !important;
          }
        }
      }
    }
  }

  .foot {
    background: #0c0d67;
    width: 46.875rem;
    height: 15.625rem;
    color: rgb(245, 245, 245);
    font-size: 1.125rem;
    padding: 0 1.5rem;
    padding-top: 2.1875rem;
    line-height: 1.875rem;
  }
}
</style>
